import React, { useState } from "react";
import { Button, Form } from "antd";
import { DownOutlined, UpOutlined, PlusOutlined } from "@ant-design/icons";
import { FormInstance } from "antd/lib/form";
import styles from "./index.module.scss";
export interface ModalFormProps {
  form?: FormInstance;
  validateMessages?: any;
  onFinish?: (e: any) => void;
  onFormChange?: (e: any, allValues: any) => void;
  count?: number,
  showExpendTxtLen?: Number,
  onDelete?: (params?: any) => void,
  onAdd?: () => void,
  children?: any,
  otherSlot?: React.ReactNode,
  addBtnText?: string,

}

const tailLayout = {
  wrapperCol: { span: 24 },
};

const HeaderSearch: React.FC<ModalFormProps> = ({
  form,
  validateMessages,
  onFinish,
  onFormChange,
  count = 4,
  showExpendTxtLen = 5,
  onAdd,
  onDelete,
  otherSlot,
  addBtnText = "新建",
  children,
}) => {
  const [show, setShow] = useState(false);
  if (!form) {
    const [formSnyc] = Form.useForm();
    form = formSnyc;
  }

  const formItemLayout = {
    layout: "inline",
    form,
    validateMessages: validateMessages || {},
    onValuesChange: onFormChange,
  };
  const onReset = () => {
    if (form) {
      form.resetFields();
      if (onFinish) onFinish(form.getFieldsValue(true));
    }
  };

  return (
    <Form<any> {...formItemLayout} onFinish={onFinish} className={styles.search}>
      {React.Children.map(children, (item, index) => {
        return show ? item : (index > count ? null : item);
      }
      )}
      <Form.Item {...tailLayout}>
        <Button type="primary" className="MR10" htmlType="submit">
          查询
        </Button>
        <Button htmlType="button" onClick={onReset}>
          重置
        </Button>
        {/* {children.length} */}
        {children.length > showExpendTxtLen && !show && (
          <span
            className="text-blue ML10 hand"
            onClick={() => {
              setShow(!show);
            }}
          >
            <span style={{color:'#689772'}}>展开<DownOutlined /></span>
          </span>
        )}
        {children.length > showExpendTxtLen && show && (
          <span
            className="text-blue ML10 hand"
            onClick={() => {
              setShow(!show);
            }}
          >
             <span style={{color:'#689772'}}>收起 <UpOutlined /></span>
          </span>
        )}
        
      </Form.Item>
      <Form.Item {...tailLayout}>
        {
          onAdd && (<Button type="primary" icon={<PlusOutlined />} className="ML10" onClick={ () => onAdd() }> 新建</Button>)
        }
        { onDelete && (<Button type="primary" className="ML10" onClick={ () => onDelete() }>批量删除</Button>)}
        { otherSlot }
      </Form.Item>
    </Form>
  );
};
export default HeaderSearch;
